<template>
  <div id="join" ref="join">
    <div v-if="resumeInfo.resumesStatus === 1">
      <div class="content">
        <img src="../../assets/img/join/success.png" alt="" />
        <p class="p1">{{ map['train'].p1 }}</p>
        <p class="p2">投递日期：{{ resumeInfo.resumesTime }}</p>
        <p class="p3">
          {{ map['train'].p3 }}
        </p>
      </div>
    </div>
    <div v-else class="inner">
      <el-affix :offset="72" class="affix">
        <el-anchor direction="horizontal" @click="handleClick" :bound="100" :offset="100" :container="join">
          <el-anchor-link v-for="(item, index) in tabsList" :href="`#label-${index == 3 ? 4 : index}`" :key="item.key">
            {{ item.label }}
          </el-anchor-link>
        </el-anchor>
      </el-affix>
      <div class="form-container">
        <a-form :model="form" name="time_related_controls" layout="vertical" @finish="onFinish" ref="formRef"
          @finishFailed="onFinishFailed">
          <div class="wrap">
            <div class="form-item" v-for="(el, a) in formList" :key="el.label">
              <div class="module-title" :href="`#label-${a + 1}`" :id="`label-${a}`">
                <span style="margin-left: 8px">{{ el.label }}</span><span v-show="el.require" style="color: red;margin-top: 2px;margin-left: 2px">*</span>
                <div v-show="el.desc" :class="[el.require ? 'no-desc' : 'desc']">{{ el.desc }}</div>
              </div>

              <div class="component-item" :style="{height:item.key === 'qualificationType' ? 0 : ''}" v-for="(item, index) in el.list" :key="item.label" v-show="item.show"
                :id="`list-${item.id}`">
                <div class="pre-title" v-show="item.preTip">
                  {{ item.preTip }} <span v-show="!item.index" style="color: red;margin-top: 2px;margin-left: 2px">*</span>
                  <span v-show="item.index"> - {{ item.index }}</span>
                </div>
                <div :class="['error-msg', el.skew ? 'skew' : '']" v-show="item.showError && !item.notRequire">
                  *{{ item.showErrorMsg || '此为必填项' }}
                </div>
                <a-form-item :name="item.label"
                  :class="[item.mainTitle ? 'mainTitle' : '', !item.notRequire ? 'form-item-warning' : '',item.component === 'checkbox' || (item.component === 'radio' && (item.key !== 'sex' && item.key !== 'isRecommends')) ? 'join-ant-form-item-checkbox' : 'join-ant-form-item']"
                  v-if="item.show && item.component != 'del'" :label="item.label">
                  <template v-if="item.component == 'input'">
                    <a-input v-model:value="item.value" :placeholder="getPlaceholer(item)"
                      :maxlength="item.maxlength" />
                  </template>
                  <template v-if="item.component == 'select'">
                    <a-select ref="select" v-model:value="item.value" :placeholder="getPlaceholer(item)">
                      <a-select-option v-for="v in item.options" :key="v.value" :value="v.value">{{
                        v.label
                      }}</a-select-option>
                    </a-select>
                  </template>
                  <template v-if="item.component == 'cascader'">
                    <a-cascader v-model:value="item.value" :options="item.options" :placeholder="getPlaceholer(item)" />
                  </template>
                  <template v-if="item.component == 'radio'">
                    <a-space >
                      <a-radio-group v-model:value="item.value"
                        :options="item.options" />
                      <a-form-item-rest>
                        <a-input v-model:value="item.inputVal" v-if="item.withInput && item.reflectLabel == item.value"
                          placeholder="请输入其他渠道" />
                      </a-form-item-rest>
                    </a-space>
                  </template>
                  <template v-if="item.component == 'checkbox'">
                    <el-checkbox-group v-model="item.value" v-if="item.useElement" :max="item.max" size="large">
                      <el-checkbox-button :class="[item.value.includes(el.value) ? 'active' : '']"
                        v-for="el in item.options" :key="el.label" :value="el.value">
                        {{ el.label }}
                      </el-checkbox-button>
                    </el-checkbox-group>
                    <div class="sort-wrap" v-if="item.useElement">
                      <div v-for="(el, idx) in getSortList(item)" :key="el">
                        <span>{{ idx + 1 }}.</span>{{ el }}
                      </div>
                    </div>
                    <a-space direction="vertical" v-else>
                      <el-checkbox-group v-model="item.value" class="checkbox-group" :max="item.max">
                        <el-checkbox v-for="v in item.options" :key="v.value" :label="v.label" :value="v.value">
                          {{ v.label }}
                        </el-checkbox>
                      </el-checkbox-group>
                    </a-space>
                  </template>
                  <template v-if="item.component == 'dateRange'">
                    <a-space direction="horizontal">
                      <a-date-picker picker="month" v-model:value="item.value[0]"  :locale="locale" placeholder="请选择开始日期"
                        value-format="YYYY-MM" :disabled-date="(cur: any) => {
                          return disabledDate(cur, item)
                        }" />
                      <span>-</span>
                      <a-form-item-rest>
                        <a-date-picker picker="month" v-model:value="item.value[1]"  :locale="locale" placeholder="请选择结束日期"
                          value-format="YYYY-MM" :disabled-date="(cur: any) => {
                            return disabledDate(cur, item)
                          }" />
                      </a-form-item-rest>
                    </a-space>
                  </template>

                  <template v-if="item.component == 'remote'">
                    <el-select v-model="item.value" filterable remote reserve-keyword clearable
                      :placeholder="getPlaceholer(item)" :remote-method="(val: string) => {
                        getShcool(val, item);
                      }" :loading="item.loading" style="width: 100%">
                      <el-option v-for="a in item.options" :key="a.value" :label="a.label" :value="a.value"></el-option>
                      <template #loading>
                        <svg class="circular" viewBox="0 0 50 50">
                          <circle class="path" cx="25" cy="25" r="20" fill="none" />
                        </svg>
                      </template>
                    </el-select>
                  </template>
                  <template v-if="item.component == 'datePicker'">
                    <a-date-picker style="width: 100%" v-model:value="item.value" placeholder="请选择日期"
                      value-format="YYYY-MM-DD" :disabled-date="(cur: any) => {
                        return disabledDate(cur, item)
                      }" :locale="locale" />
                  </template>
                  <template v-if="item.component == 'textarea'">
                    <a-textarea v-model:value="item.value" :autoSize="{ minRows: 3, maxRows: 6 }" :maxlength="1000"
                      showCount :placeholder="getPlaceholer(item)" allow-clear />
                  </template>
                  <template v-if="item.component === 'uploadarea'">
                    <a-upload-dragger v-model:fileList="item.value" v-show="item.value"
                      :before-upload="(file: File) => { beforeUpload(file, item, ['docx', 'doc', 'pdf']) }"
                      :max-count="1" :multiple="false" accept=".pdf,.doc,.docx" name="file">
                      <p style="display: flex;align-items: center;justify-content: center" class="ant-upload-drag-icon" v-show="item.value.length == 0">
                        <i class="iconfont icon-shangchuan"></i>
                        <span style="font-size: 14px">上传文件</span>
                      </p>
                      <template #itemRender="{ file, actions }">
                        <div class="uploaded-file">
                          <div class="uploaded-status">
                            <img src="../../assets/img/join/file.png" alt="" />
                            <div class="file-info">
                              <span class="ell">{{ file.name }}</span>
                              <span>{{ getSize(file.size) }}</span>
                            </div>
                            <CloseOutlined class="file-del" @click="actions.remove" />
                          </div>
                        </div>
                      </template>
                    </a-upload-dragger>
                    <div class="upload-tip" v-for="(v, i) in item.tips">{{ i + 1 }}.{{ v }}</div>
                  </template>
                  <template v-if="item.component === 'upload'">
                    <a-upload v-model:file-list="item.value" name="avatar" list-type="picture-card"
                      :show-upload-list="false" accept=".png,.jpg,.jpeg" @change="fileToBase64(item)" :max-count="1"
                      :multiple="false"
                      :before-upload="(file: File) => { beforeUpload(file, item, ['png', 'jpg', 'jpeg','PNG','JPG']) }">
                      <div class="avatar-uploader" v-if="!item?.value[0]">
                        <i class="iconfont icon-xiangji"></i>
                        <div class="ant-upload-text">添加照片</div>
                      </div>
                      <div class="preview-box" v-else>
                        <img :src="item.picsrc" alt="" srcset="" />
                      </div>
                    </a-upload>
                    <CropperDialog v-if="showCropper" :imageUrl="previewImage" @cropped="handleCropped($event, a, index)" />
                  </template>
                  <template v-if="item.component == 'assembly'">
                    <div class="assembly-box">
                      <a-select ref="select" style="width: 134px" v-model:value="item.value[0]" placeholder="请选择">
                        <a-select-option v-for="v in item.options" :key="v.value" :value="v.value">{{ v.label
                          }}</a-select-option>
                      </a-select>
                      <a-form-item-rest> <a-input v-model:value="item.value[1]"
                          placeholder="请输入分数" /></a-form-item-rest>
                    </div>
                  </template>
                  <template v-if="item.component == 'add'">
                    <div class="add-btn" @click="handleAdd(item)">
                      <img src="../../assets/img/join/add.png" alt="" />
                      <span> {{ item.text }}</span>
                    </div>
                  </template>
                </a-form-item>
                <div @click="handleDel(item)" class="del-wrap" v-if="item.component == 'del' && item.show">
                  <i class="iconfont icon-shanchu"></i>
                  <span>{{ item.text }}</span>
                </div>

                <div class="tip" v-if="item.tip">
                  {{ item.tip }}
                </div>
              </div>
            </div>
            <div class="form-item sub-area">
              <a-checkbox v-model:checked="accept">
                <div class="agreement">
<!--                   我已阅读并同意 
                  <span class="_primary"  @click="openPrivacy" style="color: #209ee4; cursor: pointer">《隐私政策》</span> 并-->
                  我承诺以上提供的内容完全属实，如本声明及其他部分系伪造或不正确，本人同意并接受方田可随时终止同我签订的协议或合同。
                </div>
              </a-checkbox>

              <a-button type="primary" class="submit-btn" @click="onSubmit"> 提交简历 </a-button>
            </div>
          </div>
        </a-form>
      </div>
    </div>
  </div>
  <ConfirmModal :identifier="'train'" ref="modal"></ConfirmModal>
  <div class="qr-code">
    <div class="p1">
      扫码获取应聘记录
    </div>
    <img style="width: 140px;height: 140px" src="../../assets/img/progress/qr-code.jpg" alt="">
  </div>
  <el-backtop :bottom="100" :right="200" target="#join" class="to-top">
    <img src="../../assets/img/join/toTop.png" alt="" srcset="" />
  </el-backtop>
</template>

<script setup lang="ts">
import {
  ElCheckboxGroup,
  ElCheckbox,
  ElSelect,
  ElOption,
  ElCheckboxButton,
  ElAffix,
  ElAnchor,
  ElAnchorLink,
  ElBacktop,
  ElMessageBox
} from 'element-plus';
import CropperDialog from './CropperDialog.vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import ConfirmModal from './ConfirmModal.vue';
import { formList, getShcool, append, del } from './data';
import type { formItem, Modules } from './data';
import { useScroll } from '@vueuse/core';
import { getSuffix } from '@/assets/common';
import apis from "../../api/index.ts"
import { ref } from 'vue';
import router from '@/routers';
const { uploadUserImage, uploadAttachment, saveUserResumes, userIndexStatus } = apis;
import { useStore } from "../../store/index.ts";
const store = useStore();
const tabsList = ref([
  { label: '基础信息', key: '1' },
  { label: '求职意向', key: '2' },
  { label: '个人经历', key: '3' },
  { label: '其他信息', key: '4' },
]);

import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

const map = ref<any>({
  train: {
    p1: '已完成简历投递',
    p3: '每人仅允许投递一次简历，提交成功后不支持再次投递。若遇特殊情况，可发送邮件到ftzhaopin@fangtian.me邮箱说明。',
  },
  contract: {
    p1: '已完成志愿选择',
    p3: '每人仅允许填写一次志愿，请根据实际情况填写，提交成功后无法自助修改。如有特殊情况请及时与对应HR沟通。',
  },
});
const { resumeInfo, userInfo } = store as any

const showCropper = ref(false);
const previewImage = ref('');
const previewPdf = ref('');

const join = ref<HTMLElement | null>(null);
const { y } = useScroll(join, { behavior: 'smooth', throttle: 200 });
const accept = ref<boolean>(false);
const form = ref({});
const modal = ref<typeof ConfirmModal | null>(null);
watch(
  formList,
  (val: Modules[]) => {
    val.forEach((el: Modules) => {
      el.list.forEach((item: formItem) => {
        if (item.component == 'dateRange') {
          if (item.value[0] != '' && item.value[1] != '') {
            item.showError = false;
          }
        } else if (item.component == 'assembly') {
          if ((item.value[0] && item.value[1]) || !item.value[0]) {
            item.showError = false;
          }
        } else if (Array.isArray(item.value)) {
          if (item.value.length !== 0) {
            item.showError = false;
          }
        } else if (item.component == 'radio' && item.withInput) {
          if (item.inputVal && item.reflectLabel == item.value) {
            item.showError = false;
          } else if (item.value !== '' && item.reflectLabel !== item.value) {
            item.showError = false;
          }
        } else if (item.value.trim() !== '') {
          item.showError = false;
        }
      });
    });
  },
  { deep: true }
);
onMounted(() => {
  resetForm()
})

const getUserIndexStatus = async (userId) => {
  const data: any = await userIndexStatus({ userId });
  if (data && data.code === '10000') {
    store.$patch({ //存储简历信息
      resumeInfo: data.data
    })
  } else {
    message.error(data.msg)
  }
}
getUserIndexStatus(userInfo.userId)

const openPrivacy = () => {
  router.push('/privacyPolicytPrivew')
}

const disabledDate = (current: any, item: formItem) => {
  const today = item.minDate?.setHours(0, 0, 0, 0) as number;
  const maxDay = item.maxDate?.setHours(0, 0, 0, 0) as number;
  return current && (current.valueOf() < today || current.valueOf() > maxDay);
};
const getPlaceholer = (item: formItem): string => {
  if (item.component === 'select' || item.component === 'datePicker') {
    return '请选择' + item.label;
  }
  return '请输入' + item.label;
};


const handleAdd = (item: formItem) => {
  append(item);
};

const handleDel = (item: formItem) => {
  del(item);
};

const getSortList = (item: formItem): string[] => {
  let list: string[] = [];
  item.value.forEach((el: string[]) => {
    item.options.forEach((v: any) => {
      if (el === v.label) {
        list.push(v.label);
      }
    });
  });
  return list;
};

const beforeUpload = async (file: File, item: formItem, typeList: string[]) => {
  const name = getSuffix(file.name);
  if (!typeList.includes(name)) {
    message.error(`仅支持上传${typeList.join('、')}文件`);
    setTimeout(() => {
      item.value = [];
    }, 200);
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('文件大小不能超过2MB');
    setTimeout(() => {
      item.value = [];
    }, 200);
    return false;
  }
  const uploadRes = item.component === 'upload' ? await uploadAvatar(file) : await doUploadAttachment(file)
  if (uploadRes && item.component === 'upload') {
    previewImage.value = uploadRes;
    showCropper.value = true;
  } else {
    previewPdf.value = uploadRes
  }
  return false;
};
const handleCropped = async (croppedImage, index, subIndex) => {
  /*fileList.value.push({
    url: croppedImage,
  });*/
  const uploadRes = await uploadAvatar(croppedImage)
  if (uploadRes) {
    // item = [{url: uploadRes}]
    formList.value[index].list[subIndex].value = []
    nextTick(() => {
      formList.value[index].list[subIndex].picsrc = uploadRes
      formList.value[index].list[subIndex].value = [{url: uploadRes}]
    })
  }
  showCropper.value = false;
};
const validate = (item: formItem): void => {

  if (Array.isArray(item.value)) {
    if (item.value.length === 0) {
      item.showError = true;
    }
    if (item.component === 'assembly') {
      if (item.value[0] && item.value[1] === '') {
        item.showError = true;
      }
    }
    if (item.component == 'dateRange') {
      if (item.value[0] === '' || item.value[1] === '') {
        item.showError = true;
      }
    }
  } else if (item.component === 'radio') {
    if (item.value == item.reflectLabel && item.inputVal == '' && item.withInput === true) {
      item.showError = true;
    }
    if (item.value.trim() == '') {
      item.showError = true;
    }
  } else if (item.value.trim() === '') {
    item.showError = true;
  }
};
const smoothScroll = (className: string, append: string | number | undefined) => {
  let anchor = document.getElementById(`${className}-${append}`) as HTMLElement;
  anchor.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  });
  // y.value = anchor.offsetTop - 20;
};
const formRef = ref<any>(null)
const resetForm = () => {
  formList.value.forEach(a => {
    a.list.forEach(b => {
      if(b.key !== "qualificationType"){
        b.value = Array.isArray(b.value) ? [] : ""
        b.showError = false
      }
    })
  })
}
const onSubmit = async () => {
  let map: { [key: string]: string | string[] } = {};
  const finalList: formItem[] = [];
  const list = formList.value;
  for (let i = 0; i < list.length; i++) {
    let el = list[i].list;
    for (let j = 0; j < el.length; j++) {
      let item = el[j];
      if (item.isNotVal || item.show == false || item.notRequire === false) {
        continue;
      }
      validate(item);
      if (!item.isNotVal && item.show == true && item.key) {
        finalList.push(item);
      }
    }
  }

  const isPass = finalList.every((el) => !el.showError);
  if (!isPass) {
    const failedItem = finalList.find((el) => !!el.showError);
    const res = await ElMessageBox.confirm(
      '存在必填信息未填写，请填写完毕后重新提交简历',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error',
      }
    )
    if (!res) return;
    smoothScroll('list', failedItem?.id);
    return;
  }
  if (!accept.value) {
    message.error('请阅读并勾选隐私政策');
    return;
  }
  /*const avatar = finalList[0]?.value[0]?.originFileObj;
  let rev1, rev2;
  if (avatar) {
    rev1 = await uploadAvatar(avatar);
    // if (!rev1) return
  }  //上传头像
  const attachment = finalList[finalList.length - 1]?.value[0]?.originFileObj;  //上传简历附件
  if (attachment) {
    rev2 = await doUploadAttachment(attachment)
    // if (!rev2) return
  }


  console.log(finalList, 'finalList');*/
  const delWidthMap = {}
  finalList.forEach((el: formItem) => {
    if (el.delWith) {
      delWidthMap[el.delWith] = el.delWith
    }
    if (!el.delWith) {
      if (Array.isArray(el.key)) {
        el.key.forEach((a, i) => {
          map[a] = el.value[i];
        })
      } else if (el.withInput && el.value === el.reflectLabel) {
        map[el.key] = el.inputVal
      }
      else {
        map[el.key] = el.value;
      }
    }

  });
  const familyMemberList = []
  const workExperienceList = [];
  const educationalList = [];
  const langsList = []
  for (const key in delWidthMap) {
    const el = delWidthMap[key];
    let label = el.split('-')[0];
    if (label == 'pratice') {
      workExperienceList.push(getMaps(finalList, el))
    } else if (label == 'competition') {
    } else if (label == 'family') {
      familyMemberList.push(getMaps(finalList, el))
    } else if (label == 'education') {
      educationalList.push(getMaps(finalList, el))
    } else if (label == 'langs') {
      langsList.push(getMaps(finalList, el))
    }
  }
  map.workExperienceList = workExperienceList
  map.familyMemberList = familyMemberList
  map.educationalList = educationalList
  for (const key in langsList[0]) {
    map[key] = langsList[0][key]
  }
  delete map['undefined'];
  map.birthplace = Array.isArray(map.birthplace) ? map.birthplace.join('/') : map.birthplace;
  map.standards = Array.isArray(map.standards) ? map.standards.join('-') : map.standards;
  map.userId = userInfo.userId
  const data: any = await saveUserResumes({
    imgae: previewImage.value,
    accessoryUrl: previewPdf.value,
    ...map
  });
  if (data && data.code == '10000') {
    // modal.value?.show();
    resetForm()
    getUserIndexStatus(userInfo.userId)
  } else {
    message.error(data.msg)
  }
};
const getMaps = (finalList, el) => {  //将动态添加部分的转成数组
  const list = finalList.filter(a => a.delWith == el);
  const evList = list.map(el => {
    let map = {}
    if (Array.isArray(el.key)) {
      el.key.forEach((a, idx) => {
        map[a] = el.value[idx];
      })
    } else {
      map[el.key] = el.value;
    }
    return map
  });
  const oneDimensionalObject = evList.reduce((acc, current) => {
    return { ...acc, ...current };
  }, {});
  return oneDimensionalObject
}
// const uploadUserImage, uploadAttachment, saveUserResumes
const uploadAvatar = async (file: File) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append("userId", userInfo.userId);
  const data: any = await uploadUserImage(formData);
  if (data.code === '10000') {
    return data.data
  } else {
    message.error('个人照片' + data.msg)
    return false
  }
}

const doUploadAttachment = async (file: File) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append("userId", userInfo.userId);
  const data: any = await uploadAttachment(formData);
  if (data.code === '10000') {
    return data.data
  } else {
    message.error('简历附件' + data.msg)
    return false
  }
}

const onFinish = (values: any) => {
  console.log('Success:', values, form.value);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
const getSize = (size: number): string => {
  let kb = size / 1024;
  if (kb > 1024) {
    return Math.ceil(kb / 1024) + ' MB';
  } else {
    return Math.ceil(kb) + ' KB';
  }
};

const fileToBase64 = async (item: formItem) => {
  if (!item.value[0]) return;
  const file = item.value[0].originFileObj;
  const reader = new FileReader();
  reader.onload = (event: any) => {
    const base64String = event?.target?.result;
    item.picsrc = base64String;
  };
  reader.readAsDataURL(file);
};
const handleClick = (e: MouseEvent) => {
  e.preventDefault();
};
</script>

<style lang="scss" scoped>
.qr-code {
  position: fixed;
  top: 90px;
  right: 20px;
  width: 242px;
  height: 323px;
  padding: 45px 38px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;



  img {
    margin-bottom: 5px;
  }

  .p1 {

    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 19px;
    text-align: center;

  }

  .p2 {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}
:deep(.preview-box img) {
  width: 130px !important;
}

:deep(.ant-form-item-label) {
  label {
    font-size: 16px;
    color: #333333;
  }
}

:deep(.el-anchor__link.is-active) {
  color: #209EE4!important;
  background: rgba(32, 158, 228, 0.1);
}

:deep(.ant-tabs-nav-wrap) {
  background: #fff;
}

:deep(.el-anchor__marker) {
  top: 0;
}

#join {
  width: 100vw;
  height: calc(100vh - 150px);

  margin-top: 72px;
  padding-top: 20px;
  box-sizing: border-box;
  overflow: auto;

  .inner {
    width: 1200px;
    margin: 0 auto;
  }
}

:deep(.el-anchor__link) {
  width: 139px;
  height: 56px;
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: 56px;
}

.tabs {
  margin-bottom: 20px;
}

.form-container {
  width: 100%;
  min-height: 100px;
  box-sizing: border-box;

  .form-item {
    background: #fff;
    border-radius: 15px;
    padding: 18px 40px;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding-right: 36px;
    box-sizing: border-box;
    position: relative;

    .error-msg {
      position: absolute;
      z-index: 10;
      color: red;
      right: 0;
    }

    .module-title {
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      text-align: left;
      height: 20px;
      line-height: 20px;
      font-family: PingFang SC, PingFang SC;
      text-transform: none;
      margin-bottom: 16px;
      display: flex;
      border-left: 4px solid #209EE4;

      .desc {
        margin-left: 17px;
        width: 434px;
        height: 28px;
        background: #f5f7fb;
        border-radius: 0px 0px 0px 0px;
        font-weight: 400;
        font-size: 14px;
        color: #8c969d;
        line-height: 28px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        padding-left: 7px;
      }
      .no-desc{
        min-width: 434px;
        height: 28px;
        border-radius: 0px 0px 0px 0px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 28px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.checkbox-group {
  display: flex;
  flex-direction: column;
}

.add-btn {
  width: 482px;
  height: 56px;
  background: #f5f7fb;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #209ee4;

  img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}

.pre-title {
  font-weight: 500;
  font-size: 20px;
  color: #209ee4;
  display: flex;
  margin-bottom: 10px;
}

.del-wrap {
  font-size: 16px;
  color: #ff4242;
  position: absolute;
  cursor: pointer;
  top: 4px;
  right: 0;
  cursor: pointer;
  z-index: 9;

  i {
    margin-right: 5px;
  }
}

.component-item {
  position: relative;
}

.tip {
  white-space: pre-line;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: normal;
  line-height: 22px;
  letter-spacing: 0em;
  color: #B3C0C8;
  margin-bottom: 15px;
  width: 700px;
}

.join-ant-form-item {
  width: 480px;
}
.join-ant-form-item-checkbox{
  :deep(.ant-form-item-label) {
    label {
      color: #209EE4!important;
    }
  }
}

.active {
  :deep(.el-checkbox-button__inner) {
    background: rgba(32, 158, 228, 0.1);
    border: none; //1px solid rgba(32, 158, 228, 0.1);
    color: #209ee4;
  }
}

:deep(.el-checkbox-group) {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;

  .el-checkbox-button__inner {
    border: 1px solid rgba(179, 192, 200, 0.3);
    border-radius: 5px;
    height: 34px;
    line-height: 12px;
  }
}

.sort-wrap {
  display: flex;
  color: #8893a9;
  margin-top: 10px;

  div {
    padding: 6px;
    box-sizing: border-box;
    font-size: 14px;
    margin-right: 4px;
    background: #f5f7fb;
    border-radius: 5px;
    display: flex;
    align-items: center;

    span {
      display: block;
      margin-left: 3px;
      width: 16px;
      height: 16px;
      // border-radius: 50%;
      line-height: 16px;
      text-align: center;
      // background: #fff;

      // background: #d3dce6;
    }
  }
}

.divide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

:deep(:where(.css-dev-only-do-not-override-18vvi68).ant-upload-wrapper .ant-upload-drag) {
  width: 480px;
  height: 104px;
  background: rgba(32, 158, 228, 0.1);
  border-radius: 8px 8px 8px 8px;
  border: 2px dashed rgba(32, 158, 228, 0.7);
  color: #209ee4;
  font-size: 21px;
  position: relative;
}

:deep(:where(.css-18vvi68).ant-upload-wrapper .ant-upload-drag){
  width: 480px;
  height: 104px;
  background: rgba(32, 158, 228, 0.1);
  border-radius: 8px 8px 8px 8px;
  border: 2px dashed rgba(32, 158, 228, 0.7);
  color: #209ee4;
  font-size: 21px;
  position: relative;
}

:deep(.ant-upload) {
  line-height: 3em;
}

.uploaded-file {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 480px;
  height: 104px;
  background: #f5f7fb;
  border-radius: 7px 7px 7px 7px;
  border: 1px solid rgba(179, 192, 200, 0.3);
}

.uploaded-status {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 31px 0 21px;
  box-sizing: border-box;

  img {
    width: 45px;
    height: 51px;
    margin-right: 16px;
  }

  .file-info {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    color: #333333;
    font-size: 21px;
    position: relative;
    width: 100%;

    span {
      width: 300px;

      &:nth-child(2) {
        color: #b3c0c8;
      }
    }
  }

  .file-del {
    right: 0;
    font-size: 20px;
    color: #b3c0c8;
  }
}

.upload-tip {
  font-size: 14px;
  color: #B3C0C8;
  line-height: 30px;
  font-family: PingFang SC, PingFang SC;
  &:nth-of-type(1){
    margin-top: 16px;
  }
}

.icon-shangchuan {
  font-size: 22px;
  margin-right: 5px;
}

:deep(:where(.css-dev-only-do-not-override-18vvi68).ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select) {
  width: 136px;
  height: 136px;
  background: rgba(32, 158, 228, 0.1);
  border-radius: 8px 8px 8px 8px;
  border: 2px dashed rgba(32, 158, 228, 0.7);
}

:deep(:where(.css-18vvi68).ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select) {
  width: 136px;
  height: 136px;
  background: rgba(32, 158, 228, 0.1);
  border-radius: 8px 8px 8px 8px;
  border: 2px dashed rgba(32, 158, 228, 0.7);
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  color: #209ee4;
  line-height: 25px;

  i {
    font-size: 24px;
  }
}

.preview-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-width: 120px;
    max-height: 100px;
  }
}

.affix {
  margin-bottom: 20px;
  //box-shadow: 0px 0px 8px 2px rgba(7, 33, 67, 0.15);
  :deep(.el-anchor__link){
    height: 48px!important;
    line-height: 48px;
    color: #B3C0C8;
    font-size: 18px;
    font-weight: 500;
  }
}

.sub-area {
  display: flex;
  justify-content: center;
  align-items: center;

  .agreement {
    margin-right: 20px;
    color: #333333;
    font-size: 16px;
  }

  .submit-btn {
    width: 140px;
    height: 56px;
    display: flex;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }
}

:deep(.el-anchor.el-anchor--horizontal .el-anchor__list) {
  padding-bottom: 0;
}

.mainTitle {
  :deep(.ant-form-item-required) {
    font-size: 24px;
    color: #333;
    font-weight: 600;
  }
}

.assembly-box {
  display: flex;
  gap: 20px;
}

.skew {
  margin-top: -35px;
}

.to-top {
  img {
    width: 40px;
    height: 40px;
  }
}

.form-item-warning {
  :deep(.ant-form-item-label) {
    &::after {
      content: '*';
      color: red;
      font-size: 14px;
      margin-left: 4px;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200px;
}
.p1 {
  font-weight: 500;
  font-size: 21px;
  color: #333333;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 20px 0;
}

.p2 {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 19px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 27px;
}

.p3 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #b3c0c8;
  line-height: 26px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner){
  border-left-color: rgba(179, 192, 200, 0.3);
}
// :deep(.ant-form-item-label) {
//   &::after {
//     content: '*';
//     color: red;
//     font-size: 14px;
//     margin-left: 4px;
//   }
// }</style>
